import React, { Component } from 'react'
import { NavLink }  from 'react-router-dom'
import RouterView from '../router'
import { connect } from 'react-redux'
import '../mock'
import './home.css'

class Home extends Component {
    state = {
        footer: [
            {
                title: "分类",
                path: "/home/classify"
            },
            {
                title: "购物车",
                path: "/home/car"
            },
            {
                title: "我的",
                path: "/home/my"
            }
        ]
    }
    render() {
        const { footer } = this.state
        const { allCount, carList } = this.props
        return (
            <div className = "home">
                <main>
                    <RouterView routerList = { this.props.child }/>
                </main>
                <footer>
                    {
                        footer.map((item, index) => {
                            return <NavLink to = { item.path } key = { index }>
                                {
                                    item.path === "/home/car" && carList.length > 0? <span className="span">
                                        { allCount }
                                    </span>: <></>
                                }
                                { item.title }
                            </NavLink>
                        })
                    }
                </footer>
            </div>
        )
    }
}

const mapStateToProps = (state) => ({
    allCount: state.allCount,
    carList: state.carList
})

Home = connect(mapStateToProps)(Home)


export default Home
